<template>
	<div class="orderBox">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-for="(item, index) in statuList" :key="index" :name="item.statusName">
				<span slot="label">
					<el-badge :hidden="item.nums==0" :value="item.nums" :max="99" class="item">
						{{ item.title }}
					</el-badge>
				</span>
				<template>
					<div class="table-box">
						<el-table :data="tabledata" style="width: 100%" class="table">
							<el-table-column label="商品信息" width="400">
								<template slot-scope="scope">
									<div class="scope-box">
										<div class="scope-item">
											<img :src="scope.row.oOrderDetails[0].DefaultImage" alt=""
												class="table_img">
										</div>
										<div class="scope-item scope-row">
											<span>{{ scope.row.cOrderNo }}</span>
											<span>{{ scope.row.dConfirmDate }}</span>
											<span>共{{ scope.row.oOrderDetails.length }}件商品</span>
										</div>
									</div>
								</template>
							</el-table-column>

							<el-table-column label="订单状态" align="center">
								<template slot-scope="scope">
									<span v-show="scope.row.cNextStatus === 'PAYMONEY'" class="dian"
										style="background: #ffa600" />
									<span v-show="scope.row.cNextStatus === 'TAKEDELIVERY'" class="dian"
										style="background: #588ce9" />
									<span v-show="scope.row.cNextStatus === 'DELIVERGOODS'" class="dian"
										style="background: #a878f6" />
									<span v-show="scope.row.cNextStatus === 'ENDORDER'" class="dian"
										style="background: #18B681" />
										<!-- {{ scope.row.cNextStatus === "SUBMITORDER"? "待提交": scope.row.cNextStatus === "PAYMONEY"? "待付款": scope.row.cNextStatus === "DELIVERGOODS"? "待发货": scope.row.cNextStatus === "TAKEDELIVERY"? "待收货": scope.row.cNextStatus === "ENDORDER"? "已完成": scope.row.cNextStatus === "SALERETURN"? "退货": scope.row.cNextStatus === "CLOSEORDER"? "已关闭": scope.row.cNextStatus === "UNREMARK"? "待评价": "" }} -->
										{{scope.row.cShowNextStatusName}}
								</template>
							</el-table-column>

							<el-table-column label="金额" align="center">
								<template slot-scope="scope">
									￥{{ scope.row.fPayMoney }}
								</template>
							</el-table-column>

							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<div v-show="scope.row.cNextStatus === 'PAYMONEY'||scope.row.cPayStatusCode === 'NOTPAYMENT'" class="buttonts"
										@click="Payment(scope.row)">
										立即付款
									</div>
									<div v-show="scope.row.cNextStatus === 'TAKEDELIVERY'" class="buttonts"
										@click="ConfirmGoods(scope.row)">
										确认收货
									</div>
									<div v-show="scope.row.cNextStatus === 'CLOSEORDER'" class="buttonts"
										@click="showDelModal(scope.row)">
										删除
									</div>
									<div v-show="scope.row.cNextStatus === 'ENDORDER'" class="buttonts"
										@click="goComment(scope.row)">
										立即评价
									</div>
									<!-- <div
                    v-show="scope.row.cNextStatus === 'ENDORDER'"
                    class="unbuttonts"
                  >
                    已评论
                  </div> -->
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
				<div class="pagination_box">
					<el-pagination background layout="prev, pager, next" :total="pagetotal"
						:current-page.sync="pageIndex" @current-change="handleCurrentChange" />
				</div>
			</el-tab-pane>
		</el-tabs>
		<deleteModal ref="delModal" @result="delUserOrders" @refresh="getData($event)" />
	</div>
</template>

<script>
	import deleteModal from "../common/deleteModal.vue";
	export default {
		components: {
			deleteModal,
		},
		props: {
			tabledata: {
				type: Array,
				default: () => [],
			},
			pagetotal: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				activeName: "",
				pageIndex: 1,
				pageSize: 10,
				statuList: [{
						status: 0,
						title: "全部订单",
						statusName: "",
						nums: 0
					},
					{
						status: 1,
						title: "待付款",
						nums: 0,
						statusName: "PAYMONEY",
					},
					{
						status: 2,
						title: "待发货",
						nums: 0,
						statusName: "DELIVERGOODS",
					},
					{
						status: 3,
						title: "待收货",
						nums: 0,
						statusName: "TAKEDELIVERY",
					},
					{
						status: 4,
						title: "待评价",
						nums: 0,
						statusName: "UNREMARK",
					},
				],
			};
		},
		mounted() {
			this.getOrderStyleCount();
		},
		methods: {
			delUserOrders(){
				
			},
			getData(getData) {
				console.log('asas', getData)
				this.$emit("theRefresh", getData);
			},
			// tab切换
			handleClick(tab) {
				this.tabledata = [];
				this.pagetotal = 0;
				this.activeName = tab.name;
				this.$emit("tabEvent", tab.name);
				this.$emit("pageEvent", 1);
			},
			// 分页获取当前页
			handleCurrentChange(val) {
				console.log("获取当前页", val);
				this.pageIndex = val;
				this.$emit("pageEvent", this.pageIndex);
			},
			//获取各状态订单数量
			getOrderStyleCount() {
				let params = {
					token: localStorage.getItem("token"),
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				};

				this.$api.person.getOrderStyleCount(params).then((res) => {
					if (res.code == 200) {
						console.log("获取各状态订单数量", res.data);
						let obj = [];
						res.data.forEach((item, index) => {
							console.log(item, index);
							if (index > 0) {
								let objs = {
									key: item[0],
									val: item[1],
								};
								obj.push(objs);
							}
						});
						console.log(obj);
						this.statuList.forEach((item) => {
							obj.forEach((items) => {
								if (item.statusName == items.key) {
									this.$set(item, "nums", items.val);
								}
							});
						});
						let total = 0
						this.statuList.forEach((item) => {
							if(item.status != 0){
								total += item.nums
							}
						});
						this.statuList.forEach((item) => {
							if(item.status == 0){
								this.$set(item, "nums", total);
							}
						});
					}
				});
			},
			// 付款
			Payment(Payment) {
				console.log("Payment", Payment);
				let paydata = {
					cOrderNo: Payment.cOrderNo, // 订单号
					paytype: 1, // 支付类型(1：表示线上支付, 2: 线下支付)
					remark: "营家支付", // 标记
					paytypecode: "construct", // 支付方式（chanpay：畅捷支付，alipay：支付宝支付,weixin:微信支付， construct：营家支付）
					payBackUrl: "/client/Pay/payNotify?paytypecode=construct",
				};
				let par = {
					token: localStorage.getItem("token"),
					data: paydata,
				};
				this.$api.good.buildPayment(par).then((res) => {
					if (res.code == 200) {
						let type = "CASHIER_PAY_PC";
						let paramsdata = {
							token: localStorage.getItem("token"),
							uid: JSON.parse(localStorage.getItem("userInfo")).mid,
							pay_no: res.data.cPayNo,
							order_no: Payment.cOrderNo,
							// page_url: `http://youyou.tangmu.xin/pc/#/payType?cOrderNo=${Payment.cOrderNo}&type=1`, // 测试
							// page_url: `https://mall.inja.com/#/payType?cOrderNo=${Payment.cOrderNo}&type=1`,  // 正式
							amount: Payment.fSalePrice,
							type: type,
						};
						this.$api.good.pay(paramsdata).then((res) => {
							if (res.code == 1) {
								let ur = this.urlEncode(res.data);
								let xx = ur.substr(0, 1);
								let yy = ur.replace(xx, "?");
								console.log("跳转支付PAY", yy);
								window.location.href = "https://ipay.inja.com/gateway/cashier/acquiring?dd=1" + ur; //正式环境
								// window.location.href =
									// "http://ipay.ysyec.com/gateway/cashier/acquiring?dd=1" + ur; //测试环境
							}
						});
					}
				});
			},
			//转码
			urlEncode(param, key, encode) {
				if (param == null) return "";
				var paramStr = "";
				var t = typeof param;
				if (t == "string" || t == "number" || t == "boolean") {
					paramStr +=
						"&" +
						key +
						"=" +
						(encode == null || encode ? encodeURIComponent(param) : param);
				} else {
					for (var i in param) {
						var k =
							key == null ?
							i :
							key + (param instanceof Array ? "[" + i + "]" : "." + i);
						paramStr += this.urlEncode(param[i], k, encode);
					}
				}
				return paramStr;
			},
			// 确认收货
			ConfirmGoods(ConfirmGoods) {
				console.log("确认收货", ConfirmGoods);
				this.$refs.delModal.showM("ConfirmGoods");
				this.$refs.delModal.getItem(ConfirmGoods);
				this.$refs.delModal.newStatus(this.activeName);
			},
			//删除订单
			showDelModal(showDelModal) {
				this.$refs.delModal.showM("delete", "order");
				this.$refs.delModal.getItem(showDelModal);
				this.$refs.delModal.newStatus(this.activeName);
			},
			//去评价
			goComment(goComment) {
				this.$router.push({
					path: "/person/comment",
					query: {
						cOrderNo: goComment.cOrderNo,
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.orderBox {
		width: 65.21rem;
		height: 58rem;
		background: #fff;

		.table-box {
			height: 51rem;
			overflow: auto;

			.table {
				.scope-box {
					display: flex;
					align-items: center;

					.table_img {
						width: 6rem;
						height: 6rem;
						// margin-right: 0.69rem;
					}

					.scope-row {
						display: flex;
						flex-direction: column;
						margin-left: 1rem;

						span {
							height: 2rem;
							display: flex;
							align-items: center;
						}
					}
				}

				.buttonts {
					border-radius: 4px;
					color: #f33343;
					cursor: pointer;
					border: 1px solid #f33343;
					width: 6rem;
					padding: 0.2rem;
					margin: 0 auto;
				}

				.unbuttonts {
					color: #f33343;
					width: 6rem;
					padding: 0.2rem;
					margin: 0 auto;
					cursor: no-drop;
				}
			}
		}

		.pagination_box {
			display: flex;
			justify-content: center;
			height: 3rem;
			align-items: center;
		}
	}
</style>
<style>
	.el-tabs__nav-scroll {
		padding: 1rem 2.19rem 0;
	}

	.el-tabs__item:hover {
		color: #f0406f;
		cursor: pointer;
	}

	.el-tabs__item:hover {
		color: #f0406f;
		cursor: pointer;
	}

	.el-tabs__active-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 2px;
		background-color: #f0406f;
		z-index: 1;
		transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		list-style: none;
	}

	.el-tabs__item.is-active {
		color: #f0406f;
	}

	.el-tabs__header {
		margin: 0;
	}

	.el-table th {
		padding: 1rem 1.6rem;
	}

	.pagination_box .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: rgba(17, 17, 17, 1);
		color: #fff;
	}

	.pagination_box .el-pagination.is-background .el-pager li:hover {
		color: rgba(17, 17, 17, 1);
	}
</style>
